<template>
	<uni-popup ref="popupRef" type="bottom" background-color="#F9F6F6" borderRadius="24rpx 24rpx 0rpx 0rpx">
		<view class="picker-box">
			<view class="picker-head">
				<text @click="close">取消</text>
				<view class="picker-title">
					<text>时间区间选择</text>
				</view>
				<text style="color:#FF6084" @click="confirm(1)">确定</text>
			</view>
			<view class="no_time" @tap="confirm(2)">无时间段要求</view>
			<view class="picker-range">
				<view class="picker-range-item" :style="getStyle('start')" @click="selectItem('start')">
					<text>{{ start_time }}</text>
				</view>
				<text class="picker-range-text">至</text>
				<view class="picker-range-item" :style="getStyle('end')" @click="selectItem('end')">
					<text>{{ end_time }}</text>
				</view>
			</view>
			<picker-view  :value="type == 'start' ? start_time_val : end_time_val"
				@change="bindChange" class="picker-view">
				<picker-view-column>
					<view class="picker-item" v-for="(item, index) in hour" :key="index">{{ item }}时</view>
				</picker-view-column>
				<!-- <picker-view-column>
					<view class="picker-item" v-for="(item, index) in minute" :key="index">{{ item }}分</view>
				</picker-view-column> -->
			</picker-view>
		</view>
	</uni-popup>

</template>

<script setup>
	import {
		ref
	} from 'vue'
	import dayjs from 'dayjs'
	const emit = defineEmits(['confirm'])
	const popupRef = ref()
	const type = ref('start')
	const hour = ref([])
	const color = ref('#FF6084')
	const minute = ref(['00'])
	const start_time = ref('06:00')
	const start_time_val = ref([6, 0])
	const end_time = ref('22:00')
	const end_time_val = ref([22, 0])
	const currentDate = ref('')
	const numberArr = async () => {
		console.log(2222,'close222')
		for (let i = 6; i <= 22; i++) {
			//不足两位时前面填充0
			if (i < 10) {
				i = '0' + i
			}
			hour.value.push(i)
		}
		// for (let j = 0; j <= 59; j++) {
		// 	//不足两位时前面填充0
		// 	if (j < 10) {
		// 		j = '0' + j
		// 	}
		// 	minute.value.push(j)
		// }
		console.log(23333332,'333333')
	}
	numberArr()
	const open = async (data) => {
		currentDate.value = data
		await popupRef.value.open()
		console.log(currentDate.value)
	}
	
	const close = () => {
		popupRef.value.close()
		reset()
	}
	const bindChange = (e) => {
		console.log('e', e)
		if (type.value == 'start') {
			start_time_val.value = e.detail.value
			start_time.value = hour.value[e.detail.value[0]] + ':00'
			// start_time.value = hour.value[e.detail.value[0]] + ':' + minute.value[e.detail.value[1]]
		} else {
			end_time_val.value = e.detail.value
			end_time.value = hour.value[e.detail.value[0]] + ':00'
			// end_time.value = hour.value[e.detail.value[0]] + ':' + minute.value[e.detail.value[1]]
		}
	}
	const selectItem = (types) => {
		type.value = types
	}
	const getStyle = (types) => {
		if (type.value == types) {
			return {
				color: color.value,
				fontWeight: 'bold',
			}
		} else {
			return {}
		}
	}
	const reset = () => {
		type.value = 'start'
		start_time.value = '06:00'
		start_time_val.value = [6, 0]
		end_time.value = '22:00'
		end_time_val.value = [22, 0]
	}
	const confirm = (type) => { // type-时间段要求   1-有 2-无
		if (type == 1) {
			let currentDateHour = dayjs().hour()
			let conditionA = Number(start_time_val.value[0]) < Number(end_time_val.value[0])
			/* 时 相同   开始分 要小于 结束分 */
			let conditionB = (Number(start_time_val.value[0]) == Number(
				end_time_val.value[0]) && Number(start_time_val.value[1]) < Number(end_time_val.value[1]))
			/* 当天  开始时间 要大于当前   时   */
			let conditionC = dayjs(dayjs().format('YYYY-MM-DD')).isSame(dayjs(currentDate.value)) ? Number(
				start_time_val.value[0]) > Number(
				currentDateHour) : true
			if (!conditionC) {
				return uni.showToast({
					title: '请选择正确的时间段!',
					icon: 'none'
				})
			}
			if (conditionA || conditionB) {
				emit('confirm', {
					startTime: start_time.value,
					endTime: end_time.value,
					type
				})
				close()
			} else {
				uni.showToast({
					title: '请选择正确的时间段!',
					icon: 'none'
				})
			}
		} else {
			emit('confirm', {
				type
			})
			close()
		}


	}

	defineExpose({
		open
	})


	/* name: 'yun-picker-time-range',
	props: {
		color: {
			type: String,
			default: '#3c9cff',
		},
	},
	emits: ['cancle', 'confirm'],
	data() {
		return {
			type: 'start',
			hour: hour,
			minute: minute,
			indicatorStyle: `height: 50px;`,
			start_time: '06:00',
			start_time_val: [0, 0],
			end_time: '23:59',
			end_time_val: [23, 59],
		}
	},
	methods: {
		bindChange(e) {
			if (this.type == 'start') {
				this.start_time_val = e.detail.value
				this.start_time = this.hour[e.detail.value[0]] + ':' + this.minute[e.detail.value[1]]
			} else {
				this.end_time_val = e.detail.value
				this.end_time = this.hour[e.detail.value[0]] + ':' + this.minute[e.detail.value[1]]
			}
		},
		selectItem(type) {
			this.type = type
		},
		getStyle(type) {
			if (this.type == type) {
				return {
					color: this.color,
					fontWeight: 'bold',
				}
			} else {
				return {}
			}
		},
		reset() {
			this.type = 'start'
			this.start_time = '06:00'
			this.start_time_val = [0, 0]
			this.end_time = '23:59'
			this.end_time_val = [23, 59]
		},
		cancle() {
			this.$emit('cancle')
			this.reset()
		},
		confirm() {
			this.$emit('confirm', {
				start_time: this.start_time,
				start_time_val: this.start_time_val,
				end_time: this.end_time,
				end_time_val: this.end_time_val,
			})
			this.reset()
		},
	}, */
</script>

<style lang="scss" scoped>
	.picker-box {
		background-color: #fff;

		.picker-head {
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 20rpx;
			border-bottom: 1rpx solid #e6e6e6;
			font-size: 30rpx;

			.picker-title {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				flex: 1;
			}
		}

		.picker-view {
			width: 100%;
			height: 400rpx;
			margin-top: 20rpx;
		}

		.picker-item {
			line-height: 100rpx;
			text-align: center;
		}

		.picker-range {
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 20rpx;
			border-bottom: 1rpx solid #e6e6e6;

			.picker-range-item {
				flex: 1;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
			}

			.picker-range-text {
				font-size: 28rpx;
			}
		}
	}

	.no_time {
		margin: 20rpx;
		text-align: center;
		font-size: 28rpx;
	}
</style>